<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor高效项目管理指南 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .code-block {
            background-color: #2d2d2d;
            border-radius: 6px;
            color: #f8f8f2;
        }
        .hover-scale {
            transition: transform 0.3s ease;
        }
        .hover-scale:hover {
            transform: translateY(-3px);
        }
        .section-divider {
            border-top: 1px solid rgba(0,0,0,0.1);
            border-bottom: 1px solid rgba(255,255,255,0.8);
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 3.5em;
            line-height: 0.8;
            margin: 0.1em 0.1em 0 0;
            color: #667eea;
            font-weight: 700;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <header class="hero-gradient text-white py-20 px-4 md:px-8">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-code text-2xl mr-3"></i>
                        <span class="text-sm uppercase tracking-wider font-semibold">技术小馆精选</span>
                    </div>
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Cursor高效项目管理指南</h1>
                    <p class="text-xl opacity-90 mb-8">掌握AI时代的智能开发工具，提升您的项目与文件管理效率</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#project-management" class="bg-white text-indigo-700 hover:bg-gray-100 px-6 py-3 rounded-full font-medium transition duration-300 shadow-md hover:shadow-lg">
                            <i class="fas fa-folder-open mr-2"></i>项目管理
                        </a>
                        <a href="#version-control" class="bg-indigo-800 bg-opacity-30 hover:bg-opacity-50 text-white px-6 py-3 rounded-full font-medium transition duration-300 shadow-md hover:shadow-lg">
                            <i class="fas fa-code-branch mr-2"></i>版本控制
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-30"></div>
                        <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-30"></div>
                        <div class="relative bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm border border-white border-opacity-20 rounded-2xl p-6 shadow-2xl">
                            <div class="flex items-center mb-4">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                                <div class="text-sm ml-2 opacity-70">workspace.code</div>
                            </div>
                            <div class="code-block p-4 text-sm overflow-x-auto">
                                <pre class="whitespace-pre-wrap"><code class="language-json">{
  "folders": [
    { "path": "./frontend" },
    { "path": "./backend" },
    { "path": "./shared-lib" }
  ],
  "settings": {
    "editor.formatOnSave": true,
    "files.exclude": {
      "**/.git": true,
      "**/node_modules": true
    }
  }
}</code></pre>
                            </div>
                            <div class="mt-4 flex justify-between items-center text-sm opacity-80">
                                <div class="flex items-center">
                                    <i class="fas fa-terminal mr-2"></i>
                                    <span>AI Ready</span>
                                </div>
                                <div>
                                    <i class="fas fa-share-alt mr-2"></i>
                                    <span>Multi-root</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-6xl mx-auto px-4 md:px-8 py-12">
        <!-- Introduction -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-600 mr-4"></div>
                <h2 class="text-xl font-semibold text-indigo-700 uppercase tracking-wider">前言</h2>
            </div>
            <div class="prose max-w-4xl mx-auto">
                <p class="drop-cap text-lg text-gray-700 leading-relaxed">高效的项目与文件管理是现代开发工作流中的核心能力。Cursor继承了VSCode强大的项目管理功能，并通过AI智能辅助将其提升到全新水平。本指南将带您深入了解Cursor在项目组织、文件操作、版本控制和代码导航方面的最佳实践，帮助您建立高效的工作流程。</p>
            </div>
        </section>

        <!-- Project Management Section -->
        <section id="project-management" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-600 mr-4"></div>
                <h2 class="text-xl font-semibold text-indigo-700 uppercase tracking-wider">项目管理基础</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                                <i class="fas fa-folder-open text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">工作区与多项目管理</h3>
                        </div>
                        <p class="text-gray-600 mb-4">Cursor的工作区(Workspace)是组织项目的核心概念，支持多根目录配置和共享设置。</p>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>通过<code class="bg-gray-100 px-1 rounded">.code-workspace</code>文件配置项目</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>支持同时处理多个相关项目</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>工作区设置覆盖全局设置</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-keyboard mr-2"></i>
                            <span>快捷键: Ctrl+K Ctrl+O (Win/Linux), Cmd+K Cmd+O (Mac)</span>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                                <i class="fas fa-search text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">大型项目导航技巧</h3>
                        </div>
                        <p class="text-gray-600 mb-4">在大型代码库中高效导航是提升生产力的关键。</p>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>快速文件导航(Ctrl+P/Cmd+P)</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>符号导航(Ctrl+Shift+O/Cmd+Shift+O)</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>AI辅助定位代码位置</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-robot mr-2"></i>
                            <span>AI示例: "在哪里可以找到处理用户认证的代码？"</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Code Example -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
                <div class="bg-gray-800 px-4 py-3 flex items-center">
                    <div class="flex space-x-2 mr-4">
                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
                    </div>
                    <div class="text-sm text-gray-300">my-projects.code-workspace</div>
                </div>
                <div class="code-block p-4 text-sm">
                    <pre class="whitespace-pre-wrap"><code class="language-json">{
  "folders": [
    {
      "path": "./frontend",
      "name": "Web App"
    },
    {
      "path": "./backend",
      "name": "API Server"
    },
    {
      "path": "./shared-lib",
      "name": "Shared Library"
    }
  ],
  "settings": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.exclude": {
      "**/.git": true,
      "**/node_modules": true
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
  }
}</code></pre>
                </div>
            </div>

            <!-- Visualization -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-project-diagram text-indigo-600 mr-2"></i>
                    <span>多项目工作区结构</span>
                </h3>
                <div class="mermaid">
                    graph TD
                    A[Workspace] --> B[Frontend]
                    A --> C[Backend]
                    A --> D[Shared Library]
                    B --> E[React Components]
                    B --> F[Redux Store]
                    C --> G[API Routes]
                    C --> H[Services]
                    D --> I[Utility Functions]
                    D --> J[Type Definitions]
                </div>
            </div>
        </section>

        <!-- Advanced File Operations Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-600 mr-4"></div>
                <h2 class="text-xl font-semibold text-indigo-700 uppercase tracking-wider">高级文件操作</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                                <i class="fas fa-code-compare text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">文件比较与合并</h3>
                        </div>
                        <p class="text-gray-600 mb-4">Cursor提供了强大的差异查看和合并功能，帮助您管理代码变更。</p>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>可视化文件差异比较</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>三向合并解决冲突</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>AI辅助解决复杂合并</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-robot mr-2"></i>
                            <span>AI示例: "这个文件有合并冲突，请帮我合并保留功能X和Y"</span>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                                <i class="fas fa-file-code text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">模板与代码片段</h3>
                        </div>
                        <p class="text-gray-600 mb-4">代码片段和模板可大幅减少重复性编码工作。</p>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>自定义语言特定片段</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>项目模板标准化文件结构</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>AI生成定制化模板</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-robot mr-2"></i>
                            <span>AI示例: "创建一个React组件模板，包含类型定义和测试"</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Code Example -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
                <div class="bg-gray-800 px-4 py-3 flex items-center">
                    <div class="flex space-x-2 mr-4">
                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
                    </div>
                    <div class="text-sm text-gray-300">java.json (代码片段)</div>
                </div>
                <div class="code-block p-4 text-sm">
                    <pre class="whitespace-pre-wrap"><code class="language-json">{
  "Java Class": {
    "prefix": "jclass",
    "body": [
      "package ${1:com.example.package};",
      "",
      "import java.util.*;",
      "",
      "/**",
      " * ${2:Description of the class}",
      " */",
      "public class ${3:ClassName} {",
      "    public ${3:ClassName}() {",
      "        // Constructor",
      "        $0",
      "    }",
      "}",
      ""
    ],
    "description": "Basic Java class template"
  },
  "REST Controller": {
    "prefix": "restcontroller",
    "body": [
      "package ${1:com.example.package}.controller;",
      "",
      "import org.springframework.web.bind.annotation.*;",
      "",
      "@RestController",
      "@RequestMapping(\"/api/${3:resource}\")",
      "public class ${4:Name}Controller {",
      "    @GetMapping",
      "    public ResponseEntity&lt;List&lt;${5:Type}&gt;&gt; getAll() {",
      "        return ResponseEntity.ok(${6:service}.findAll());",
      "    }",
      "    $0",
      "}",
      ""
    ],
    "description": "Spring Boot REST Controller"
  }
}</code></pre>
                </div>
            </div>
        </section>

        <!-- Version Control Section -->
        <section id="version-control" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-600 mr-4"></div>
                <h2 class="text-xl font-semibold text-indigo-700 uppercase tracking-wider">版本控制集成</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                                <i class="fab fa-git-alt text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">Git基本操作</h3>
                        </div>
                        <p class="text-gray-600 mb-4">Cursor内置强大的Git支持，使版本控制成为开发流程的自然部分。</p>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>直观的源代码管理视图</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>可视化文件差异和行内状态</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>AI生成提交消息</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-keyboard mr-2"></i>
                            <span>快捷键: Ctrl+Shift+G (Win/Linux), Cmd+Shift+G (Mac)</span>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                                <i class="fab fa-github text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">GitHub/GitLab集成</h3>
                        </div>
                        <p class="text-gray-600 mb-4">与主流代码托管平台无缝协作，提升团队开发效率。</p>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>直接克隆和管理远程仓库</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>创建和审查Pull Requests</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>问题跟踪和管理</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-robot mr-2"></i>
                            <span>AI示例: "帮我创建这个功能的Pull Request描述"</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Visualization -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-code-branch text-indigo-600 mr-2"></i>
                    <span>Git工作流可视化</span>
                </h3>
                <div class="mermaid">
                    gitGraph
                        commit
                        branch feature/login
                        checkout feature/login
                        commit
                        commit
                        checkout main
                        merge feature/login
                        branch feature/payment
                        checkout feature/payment
                        commit
                        commit
                        checkout main
                        merge feature/payment
                </div>
            </div>

            <!-- Code Review Section -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                            <i class="fas fa-search text-indigo-600"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800">代码审查工作流</h3>
                    </div>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold text-gray-700 mb-2">审查功能</h4>
                            <ul class="space-y-2 text-gray-600">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-indigo-500 mt-1 mr-2 text-sm"></i>
                                    <span>差异视图和并排比较</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-indigo-500 mt-1 mr-2 text-sm"></i>
                                    <span>行内评论和讨论</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-indigo-500 mt-1 mr-2 text-sm"></i>
                                    <span>历史版本对比</span>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-700 mb-2">AI辅助审查</h4>
                            <ul class="space-y-2 text-gray-600">
                                <li class="flex items-start">
                                    <i class="fas fa-check text-indigo-500 mt-1 mr-2 text-sm"></i>
                                    <span>识别潜在问题和改进点</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-indigo-500 mt-1 mr-2 text-sm"></i>
                                    <span>生成审查摘要和建议</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check text-indigo-500 mt-1 mr-2 text-sm"></i>
                                    <span>特定关注点分析</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                    <div class="text-sm italic text-gray-500">
                        <i class="fas fa-comment-dots mr-2"></i>
                        <span>AI示例: "请检查我最近的更改，主要关注用户认证部分的安全性"</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Search & Structure Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-1 bg-indigo-600 mr-4"></div>
                <h2 class="text-xl font-semibold text-indigo-700 uppercase tracking-wider">搜索与项目结构</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                                <i class="fas fa-search-plus text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">高级搜索与替换</h3>
                        </div>
                        <p class="text-gray-600 mb-4">Cursor提供强大的搜索工具，支持复杂模式匹配和大规模重构。</p>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>正则表达式搜索与替换</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>全局批量修改操作</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>符号智能重命名</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-keyboard mr-2"></i>
                            <span>快捷键: Ctrl+Shift+F (搜索), Ctrl+Shift+H (替换)</span>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                                <i class="fas fa-sitemap text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">项目结构可视化</h3>
                        </div>
                        <p class="text-gray-600 mb-4">理解代码结构和依赖关系对大型项目维护至关重要。</p>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>模块依赖关系图</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>类层次结构视图</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                <span>函数调用关系分析</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-robot mr-2"></i>
                            <span>AI示例: "分析我们项目的架构结构，找出核心组件"</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Visualization -->
            <div class="bg-white rounded-xl shadow-md p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-diagram-project text-indigo-600 mr-2"></i>
                    <span>项目依赖关系图</span>
                </h3>
                <div class="mermaid">
                    flowchart TD
                    subgraph 前端 [Web App]
                        A[React Components]
                        B[Redux Store]
                        C[UI Library]
                    end

                    subgraph 后端 [API Server]
                        D[Controller]
                        E[Service]
                        F[Repository]
                    end

                    subgraph 共享库 [Shared Lib]
                        G[Utils]
                        H[Models]
                        I[Constants]
                    end

                    A -->|使用| C
                    A -->|调用| D
                    B -->|管理状态| A
                    D -->|调用| E
                    E -->|使用| F
                    E -->|使用| H
                    F -->|使用| G
                    C -->|使用| I
                </div>
            </div>
        </section>

        <!-- Conclusion -->
        <section class="py-12 border-t border-b border-gray-200 section-divider">
            <div class="text-center max-w-3xl mx-auto">
                <div class="w-16 h-1 bg-indigo-600 mx-auto mb-6"></div>
                <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">掌握Cursor项目管理，提升开发效率</h2>
                <p class="text-lg text-gray-600 mb-8">通过本指南介绍的项目管理、文件操作、版本控制和结构可视化功能，您可以将开发工作流程提升到全新水平。结合Cursor的AI智能辅助，让您专注于创造性工作，而非繁琐的项目管理任务。</p>
                <a href="http://www.yuque.com/jtostring" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-medium px-8 py-3 rounded-full transition duration-300 shadow-md hover:shadow-lg">
                    <i class="fas fa-book-open mr-2"></i>访问技术小馆获取更多资源
                </a>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="max-w-6xl mx-auto px-4 md:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                    <p class="text-gray-400">分享前沿技术知识与实用开发技巧</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
                        <i class="fas fa-external-link-alt mr-2"></i>http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-500">
                <p>&copy; 2023 技术小馆. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            fontFamily: "'Noto Sans SC', sans-serif",
            gitGraph: {
                mainBranchName: 'main',
                showCommitLabel: false,
                rotateCommitLabel: false
            },
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 添加平滑滚动效果
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>